<template>
  <section>
    <p>
      <!-- 当选中时，`picked` 为字符串 "a" -->
      <input id="picked" type="radio" v-model="picked" value="a">
      <label for="picked">选中？{{picked}}</label>
    </p>
    <p>
      <!-- `toggle` 为 true 或 false -->
      <input id="toggle" type="checkbox" v-model="toggle">
      <label for="toggle">选中？{{toggle}}</label>
    </p>
    <p>
      <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
      <select v-model="selected">
        <option value="abc">选中？{{selected}}</option>
      </select>
    </p>
    <p>
      <input id="yesno" type="checkbox" v-model="yesNo" true-value="yes" false-value="no">
      <label for="yesno">选中？{{yesNo}}</label>
    </p>
    <p>
      <input id="pick" type="radio" v-model="pick" v-bind:value="b">
      <label for="pick">选中？{{pick}}</label>
    </p>
    <p>
      <select v-model="inlineSelected">
        <option v-bind:value="{number:123}">123</option>
      </select>
    </p>
  </section>
</template>

<script>
export default {
  name: "ValueBinding",
  data() {
    return {
      picked: "",
      toggle: false,
      selected: "",
      yesNo: "no",
      pick: "",
      b: "b",
      inlineSelected: ""
    };
  }
};
</script>